<template>
    <view class="content">
		<view class="bg"></view>
        
		<view class="box">
			<view class="top">
				<view class="info">
					<image src="../../static/image/img_5.png" class="img-5"></image>
					<view>
						<view class="u-flex">
							<view class="u-font-24">分销总佣金</view>
							<image src="../../static/icon/money.png" class="money-icon"></image>
						</view>
						<view class="price">
							￥<text class="price-num">53.29</text>
						</view>
					</view>
					<view class="btn" @click="$gTo(`./list`)">佣金明细</view>
				</view>
				
				<view class="nav">
					<view class="nav-i" @click="$gTo(`./poster`)">
						<image src="../../static/icon/poster.png" class="share-2"></image>
						<view>我的海报</view>
					</view>
					<view class="nav-i nav-i2" @click="TXshow = true">
						<image src="../../static/icon/share_2.png" class="share-2"></image>
						<view>立即提现</view>
					</view>
					<view class="nav-i nav-i3" @click="$gTo(`./team`)">
						<image src="../../static/icon/team.png" class="share-2"></image>
						<view>分销人数</view>
					</view>
				</view>
			</view>
			<view class="tip" @click="show = true">说明规则</view>
		</view>
		
		<view class="tx-tit">
			<image src="../../static/icon/tx.png" class="tx-icon"></image>
			<view>提现明细</view>
		</view>
		
		<view class="item" v-for="(item,index) in 3" :key="index">
			<view class="u-flex">
				<view class="title">提现明细提现明细提现明细</view>
				<view class="time">2021.06.30 09:00</view>
			</view>
			<view class="down">
				<view class="u-flex-1">
					<view class="money">-23.15</view>
					<view>变更金额（元）</view>
				</view>
				<view class="u-flex-1">
					<view class="money-sy">12.08</view>
					<view>剩余金额（元）</view>
				</view>
				<!-- <view class="sta">未审核</view> -->
				<!-- <view class="sta sta2">审核中</view> -->
				<view class="sta sta3">已审核</view>
			</view>
		</view>
		
		<!-- 规则介绍 -->
		<u-popup v-model="show" mode="center" border-radius="30">
			<view class="rule-frame">
				<view class="rule-frame-tit">规则介绍</view>
				<view>
		            <scroll-view scroll-y="true" style="height: 40vh;">
		                <view class="privacy-txt">
		                    <rich-text :nodes="rule"></rich-text>
		                </view>
		            </scroll-view>
				</view>
				<view class="rule-btn" @click="show = false">我知道了</view>
			</view>
		</u-popup>
		
		<!-- 提现 -->
		<u-popup v-model="TXshow" mode="center" border-radius="30" :closeable="true">
			<view class="frame-tx">
				<view class="rule-frame-tit">佣金提现</view>
				<input type="digit" placeholder="请输入提现金额" class="inp">
				<view class="ktxje">可提现金额：<text>994.00元</text></view>
				<view class="tx-pop-box">
					<view class="p-tx-tit">提现说明</view>
		            <scroll-view scroll-y="true" style="height: 18vh;">
		                <view>
		                    <rich-text :nodes="rule"></rich-text>
		                </view>
		            </scroll-view>
				</view>
				<view class="rule-btn" @click="confirm">确认申请</view>
			</view>
		</u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				TXshow: false,
                show: false,
				rule: '好友通过您的邀请码注册成为会员后，Ta即成为您的会员，未来Ta及Ta发展的买家下单时产生的消费佣金均计入您的账户中',
            };
        },
        onLoad() {
            
        },
        methods: {
            
        }
    };
</script>

<style lang="scss">
	
    page{
        background-color: #fff;
    }
	.content {
		padding: 20rpx;
	}
	
	.bg {
		width: 100%;
		height: 390rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: linear-gradient(to bottom, #2658aa, #f5f5f5);
	}
	.box{
		background-color: #f2f2f6;
		border-radius: 20rpx;
	}
	.top{
		padding: 60rpx 25rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
	}
	.info{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx 40rpx;
	}
	.img-5{
		width: 150rpx;
		height: 204rpx;
		position: absolute;
		right: 0;
		top: 10rpx;
	}
	.money-icon{
		width: 26rpx;
		height: 26rpx;
		margin-left: 10rpx;
	}
	.price{
		font-size: 42rpx;
	}
	.price-num{
		font-size: 70rpx;
	}
	.btn{
		font-size: 26rpx;
		color: #f76d0a;
		padding: 14rpx 30rpx;
		background-color: #fff;
		border: 2rpx solid #f76d0a;
		border-radius: 50rpx;
		position: relative;
		z-index: 9;
	}
	.tip{
		padding: 20rpx 0;
		font-size: 24rpx;
		text-align: center;
		text-decoration: underline;
	}
	.nav{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.nav-i{
		width: 204rpx;
		height: 83rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #fff;
		background-color: #bd4324;
	}
	.nav-i2{
		background-color: #ce9f6c;
	}
	.nav-i3{
		background-color: #2658aa;
	}
	.share-2{
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
	
	.tx-tit{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 40rpx;
		font-size: 34rpx;
		font-weight: bold;
	}
	.tx-icon{
		width: 40rpx;
		height: 30rpx;
		margin-right: 10rpx;
	}
	
	
	.item{
		padding: 35rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.title{
		flex: 1;
		font-size: 30rpx;
		font-weight: bold;
		color: #444444;
		padding-right: 20rpx;
	}
	.time{
		font-size: 24rpx;
		color: #8c8c8c;
		padding: 6rpx 10rpx;
		background-color: #f8f8f8;
		border-radius: 4rpx;
	}
	.down{
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		padding-top: 25rpx;
		font-size: 24rpx;
		color: #8f8f8f;
	}
	.money{
		font-size: 56rpx;
		color: #f76d0a;
	}
	.money-sy{
		font-size: 40rpx;
		color: #000;
	}
	.sta{
		padding: 6rpx 12rpx;
		border-radius: 4rpx;
		color: #ff9600;
		background-color: #fff1de;
	}
	.sta2{
		color: #f62a2a;
		background-color: #ffe7e7;
	}
	.sta3{
		color: #0042bc;
		background-color: #e7f3ff;
	}
	
	
	// 规则介绍
	.rule-frame {
		width: 626rpx;
		background-color: #fff;
		padding: 40rpx 30rpx;
	}
	.rule-frame-tit {
		font-size: 32rpx;
	    font-weight: bold;
		line-height: 34rpx;
		color: #000000;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.privacy-txt {
	    font-size: 26rpx;
	    color: #949494;
	}
	.rule-btn {
		width: 372rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background-color: #2658aa;
		border-radius: 50rpx;
		margin: 30rpx auto 0;
	}
	.frame-tx{
		width: 626rpx;
		padding: 40rpx 30rpx;
		background: linear-gradient(to bottom,#bad9fb,#fff);
	}
	.inp{
		height: 90rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 20rpx;
	}
	.ktxje{
		padding: 30rpx 0;
		font-size: 26rpx;
	}
	.ktxje>text{
		color: #f76d0a;
	}
	.tx-pop-box{
		padding: 25rpx;
		background-color: #fff;
		border-radius: 10rpx;
		font-size: 26rpx;
	}
	.p-tx-tit{
		font-weight: bold;
		text-align: center;
		padding-bottom: 20rpx;
	}
	

</style>
